<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>博客</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
</head>

<body style="padding: 30px;background-image: url('../../static/images/blogsbg2.jpg');" >
<div class="container-fluid">
	<div class="row">
		<div class="col-md-3" style="text-align: center;">
			<img alt="Bootstrap Image Preview" src="../../static/images/user/bg1.jpg" class="rounded-circle" style="width: 40%;border-radius: 100%;" />
            <br><h3><a href="" >{{ username }}</a></h3>
            <a href="/" class="btn btn-primary">
					返回首页
				</a>
		</div>
		<div class="col-md-6">
            <form style="margin-bottom: 30px;" action="" name="search" method="get"><input type="text" id="word" required><input type="button" value="搜索" id="search"></form>
			<dl>
                {% for item in  blogs_data%}
				<dt>
					<a href="/details/{{ item.blog_id }}/">{{ item.title }}</a>
				</dt>
				<dd>
                    发布者：<a href="#">{{ item.username }}</a> &nbsp; &nbsp;&nbsp;<a href="">{{ item.tags }}</a>&nbsp; &nbsp;&nbsp;<p>{{ item.date }}</p>
				</dd>

				{% endfor %}
			</dl>
            <nav>
				<ul class="pagination">
					<li class="page-item">
						<a class="page-link" href="/blogs/{{ Previous }}/">上一页</a>
					</li>

					<li class="page-item">
						<p class="page-link" >{{ now_page }}/{{total_page  }}</p>
					</li>

					<li class="page-item">
						<a class="page-link" href="/blogs/{{ Next }}/">下一页</a>
					</li>
				</ul>
			</nav>
		</div>
		<div class="col-md-3">
			<ul>
				<li class="list-item">
					Lorem ipsum dolor sit amet
				</li>
				<li class="list-item">
					Consectetur adipiscing elit
				</li>
				<li class="list-item">
					Integer molestie lorem at massa
				</li>
				<li class="list-item">
					Facilisis in pretium nisl aliquet
				</li>
				<li class="list-item">
					Nulla volutpat aliquam velit
				</li>
				<li class="list-item">
					Faucibus porta lacus fringilla vel
				</li>
				<li class="list-item">
					Aenean sit amet erat nunc
				</li>
				<li class="list-item">
					Eget porttitor lorem
				</li>
			</ul>
		</div>
	</div>
</div>
    <script src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript">
        $("#search").click(function(e) {
            $.ajax({
                url:'/search',
                type:'get',
                data:$(#word).text(),
                success:function (status) {

                },
                error:function (e) {
                    console.log(e)
                }
            })
        })

    </script>
</body>
</html>
